<template>
  <div style="position:relative;">

    <div class="body">
      <div class="search">
        <div>
          <img src="../assets/img/Search.png" alt="">
          <input type="text" placeholder="大家都在搜...." @focus="toSearch">
        </div>
      </div>
      <div>
        <van-tabs v-model="active" swipeable >
          <van-tab v-for="(v,key) in list" :title="v.name" :key="key">
            <div>
              <goodsCommend :category_id="v.category_id" style="margin-top: 2.5vw">
              </goodsCommend>
            </div>
          </van-tab>
        </van-tabs>

      </div>

    </div>
    <Footer :type="1"></Footer>
  </div>
</template>

<script>
  import goodsCommend from '../components/goodsCommend'
  import Footer from '../components/common/Footer'
  import request from '../request/index'
  export default {
    name: "club",
    components:{
      goodsCommend,
      Footer
    },
    data(){
      return{
        active:0,
        list:[],
        category_id:[],

      }
    },
    methods:{
      toSearch(){
        this.$router.push({
          path:'/search1'
        })
      }
    },
    created(){
     request.club(this);

    },
  }
</script>

<style scoped lang="scss">
  .body{
    margin-bottom: 8vh;
      .search{
        width: 100vw;
        height: 10vw;
          div{
            width: 92vw;
            height: 8vw;
            background: #f5f5f5;
            margin: 0px auto;
            margin-top: 1vw;
            border-radius: 6vw;
            img{
              width: 5vw;
              height: 5vw;
              margin-top: 1.5vw;
              margin-left: 5vw;
            }
            input{
              background: none;
              float: right;
              width: 85%;
              height: 100%;
            }
          }
      }
  }
</style>
